<template>
  <div class="main-div">
    <Row>
      <Spin v-show="isSpinShow" fix size="large" />
      <el-tabs v-model="activeName" >
        <el-tab-pane label="基本信息" name="form">
          <Card>
            <div slot="title">
              <div>

                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('approvalHistory')"
                >审批意见
                </Button>
                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('flowImage')"
                >流程图
                </Button>
                <Button
                  type="primary"
                  style="margin-right: 15px;"
                  @click="action('print')"
                >打印
                </Button>
              </div>

            </div>
            <div v-if="jsonData.config!=null" class="container"  style=" overflow: auto;max-height: 550px">

              <fm-generate-form
                ref="generateForm"
                :data="jsonData"
                :remote="remoteFuncs"
                :value="editData"
                :remote-option="dynamicData"
                :taskId="processInstanceId"

              />

            </div>
          </Card>
        </el-tab-pane>
        <el-tab-pane label="附件" name="attachment">
          <div class="block" style="margin-left: 15px">
            <el-timeline>
              <el-timeline-item color="#0bbd87" v-for="(item,index) in bpmTaskAttachment " :timestamp="item.createTime" placement="top">
                <el-card>
                  <h4>变更人:{{item.createBy}}</h4>
                  <p> 变更内容: {{item.changeContent}}</p>
                  <p v-for="(item1,index1) in item.bpmTaskAttachmentDetailedList">
                    <el-link type="info" :href="item1.url" target="_blank">{{item1.name}}</el-link>
                  </p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>
      </el-tabs>




    </Row>
    <Row>
      <footer />
    </Row>
    <Modal
      v-model="opinion.show"
      title="意见"
      width="85%"
      :transfer="false"
      :mask-closable="false"
    >
      <Table
        ref="selection"
        :loading="opinion.loading"
        highlight-row
        height="450"
        :columns="opinion.tableColumns"
        :data="opinion.tableData"
        style="padding-left: 10px;padding-top: 10px"
      />
      <div slot="footer" />
    </Modal>
    <Modal
      :mask-closable="false"
      v-model="flowImage.show"
      title="流程图"
      width="85%"
      :transfer="false"
    >
      <iframe
        id="flowImageframe"
        width="100%"
        style="min-height: 600px"
        height="100%"
        frameborder="0"
        align="center"
        allowfullscreen="true"
        allow="autoplay"
        :src="flowImage.src"
      />
      <div slot="footer" />
    </Modal>
  </div>

</template>

<script>
import { renderHisForm } from '@/api/analy'
import {
  opinionTask
} from '@/api/action'
import {
  getBpmTaskAttachmentByProcessInstanceId
} from '@/api/analy'
export default {
  name: 'Task',
  components: {
  },

  data() {
    return {
      activeName: 'form',
      fileList: [],
      bpmTaskAttachment: [],
      attachmentForm: {
        createBy: '',
        id: '',
        createTime: '',
        procDefId: '',
        taskId: '',
        processInstanceId: '',
        changeContent: '',
        modelKey: '',
        file: [],
      },
      flowImage:
          {
            show: false,
            src: '',
            base: process.env.VUE_APP_BASE_BPM_API + '/view/tab.html?fireHoverAction=true&table=true' + '&instId='
          },
      jsonData: {},
      editData: {},
      remoteFuncs: {},
      dynamicData: {},
      processInstanceId: '',
      isSpinShow: true,
      opinion:
          {
            show: false,
            loading: true,
            tableColumns: [
              {
                title: '任务名称',
                key: 'nodeName'
              },
              {
                title: '创建时间',
                key: 'createTime'
              },
              {
                title: '审批时间',
                key: 'completeTime'
              },
              {
                title: '执行人',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  if (node.a1FlowTaskTrajectoryEntity) {
                    html = node.a1FlowTaskTrajectoryEntity.userName
                  } else {
                    html = node.auditor
                  }
                  if(!html){
                    if(node.identityLinks){
                      html=node.identityLinks
                    }

                  }
                  return h('span', html)
                }
              },
              {
                title: '任务标题',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.title
                  return h('span', html)
                }
              },
              {
                title: '备注/意见',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.opinion
                  return h('span', html)
                }
              },
              {
                title: '状态说明',
                render: (h, params) => {
                  var html = '-'
                  var node = this.opinion.tableData[params.index]
                  html = node.a1FlowTaskTrajectoryEntity.statusVal
                  return h('span', html)
                }
              }

            ],
            tableData: []
          }
    }
  },
  mount() {
    this.activeName='form'
    this.getData()
  },
  created() {
    var query = this.$route.query
    this.processInstanceId = query.processInstanceId
    this.getBpmTaskAttachmentByProcessInstanceId(this.processInstanceId );
    this.activeName='form'

    renderHisForm(this.processInstanceId).then((response) => {
      if (response.data){
        this.jsonData = JSON.parse(response.data)
      }
      if (response.editData){
        this.editData = JSON.parse(response.editData)

      }
      this.isSpinShow = false
    })
  },
  methods: {
    getBpmTaskAttachmentByProcessInstanceId: function (id) {
      try {
        getBpmTaskAttachmentByProcessInstanceId(id).then((response) => {
          if (response.code == 0) {
            var data = response.data;
            this.bpmTaskAttachment = data;
            if (response.bpmTaskAttachment) {
              this.attachmentForm.id=response.bpmTaskAttachment.id;
              this.attachmentForm.createBy=response.bpmTaskAttachment.createBy
              this.attachmentForm.createTime=response.bpmTaskAttachment.createTime
              this.attachmentForm.procDefId=response.bpmTaskAttachment.procDefId
              this.attachmentForm.changeContent=response.bpmTaskAttachment.changeContent
              this.attachmentForm.taskId=response.bpmTaskAttachment.taskId
              this.attachmentForm.processInstanceId=response.bpmTaskAttachment.processInstanceId
              this.fileList=response.bpmTaskAttachment.bpmTaskAttachmentDetailedList
            }
          } else {
          }
        })
      } catch (e) {

      }
    },
    action: function(action) {
      if (typeof action === 'object') {
        this.alias = action.alias
      } else {
        this.alias = action
      }

      switch (this.alias) {
        case 'approvalHistory':
          this.opinionAction()
          break
        case 'flowImage':
          this.flowImageAction()
          break
        case 'print':

          window.print()
          break
        default:
      }
    },
    flowImageAction: function() {
      this.flowImage.src = this.flowImage.base + this.processInstanceId + '&t=' + new Date().getTime()
      this.flowImage.show = true
    },
    opinionAction: function() {
      this.opinion.show = true
      try {
        opinionTask(this.processInstanceId).then((response) => {
          if (response.code == 0) {
            this.opinion.loading = false
            this.opinion.tableData = response.data
          }
        })
      }finally {
        this.opinion.loading = false

      }

    },
    details: function(e) {
      // "taskId":data.id
      this.$router.push({ name: 'handleHisTaskDetails', query: { t: new Date().getTime() }})
    }

  }

}

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .container {
    height: auto !important;
    min-height: 450px;
  }

</style>
